<template>
  <view>
    <!-- 头部 -->
    <view class="top">
      <image class="top-icon"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/pssfkh4z8xj2d6w5cl41q4ut54wzg0dwnlf65acaa29-1ef5-44e0-a3ec-76fd991386e9"
        @click="toReturn()"></image>
      <view class="top-text">登录注册</view>
    </view>
    <!-- 标题 -->
    <view class="title-box">
      <view class="title-text">
        您好，</br>欢迎来到速裁通
      </view>
      <text class="title-info">区块链电子签约平台</text>
    </view>
    <!-- 验证码登录与忘记密码 -->
    <view class="text-code-password">
      <view @click="toCode">切换验证码登录</view>
      <view @click="toPassword">忘记密码？</view>
    </view>
    <!-- 账号密码 -->
    <view class="phone-box">
      <image class="phone-icon" src="https://lanhu.oss-cn-beijing.aliyuncs.com/psom2x6aqm7wf6csy5gxryl2xy1s8033f5c720f00d-a47b-48a0-a1ab-2084353fbc20"></image>
      <input class="phone-input" v-model="phone" placeholder="账号" type="text"/>
    </view>
    <view class="password-box">
      <image class="password-icon" src="https://lanhu.oss-cn-beijing.aliyuncs.com/psg7arynoj5wdmpz93desl5mndcyb1iir7ca12f32-2ffb-4996-980f-47538dfc7a9e"></image>
      <input class="password-input" placeholder="密码" v-model="password" v-if="isShow" type="password"/>
      <input class="password-input" placeholder="密码"  v-model="password" v-else type="text"/>
      <image v-if="isShow" @click="isShow=!isShow" class="password-is" src="https://lanhu.oss-cn-beijing.aliyuncs.com/psp3cvhumteb848efo7z1uyfuwuz5ybd6d46af37cf-099b-43a3-a6df-d0b4c4ce5ccf" ></image>
      <image v-else @click="isShow=!isShow" class="password-is" src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps2u0ta58rnne24bhc9akuqwjjvmwdr4u8ec5597e9c-4b3f-4e0c-8e57-7e9774df1741"></image>
    </view>
    <!-- 登录按钮 -->
    <view class="button-box" @click="login()">登录</view>
    <!-- 注册 -->
    <view class="register-text" @click="toHome">没有账号 立即注册</view>
    <!-- 协议 -->
    <view class="protocol-box">
      <view class="protocol-button" v-if="!isPitchOn" @click="isPitchOn=!isPitchOn"></view>
      <view class="protocol-button1" v-else @click="isPitchOn=!isPitchOn"></view>
      <view class="protocol-text">本人已认真阅读，理解并同意《用户协议》和《隐私协议》</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isShow:true,//是否显示
        isPitchOn:false,//是否同意
        phone:'',//账号
        password:'',//密码
      }
    },
    methods: {
      //登录页面
      async login(){
        if(this.isPitchOn){
          let params={
            username:this.phone,//手机号
                password:this.password,//密码
                platform:2
          }
          let res = await this.$http('/auth/login','post', params)
          console.log('密码登录',res)
          if (res.data.code == 200) {
            uni.setStorageSync('token', res.data.data) 
			
			let userType
			if(res.data.data.userType=="1"){
			  userType=2
			}else if(res.data.data.userType=='2'){
			  userType=1
			}
			uni.setStorageSync('checkType', userType)
			
            uni.navigateTo({
              url: '/subpkg/nameLogin/nameLogin'
            })
          } else {
            let title = res.data.msg
            uni.$showMsg(title)
          }
        }else{
          let title ='是否同意协议!'
          uni.$showMsg(title)
        }
        
      },
      // 返回
      toReturn() {
        uni.navigateBack({
          delta: 1
        })
      },
      toHome(){
        uni.navigateTo({
          url:'/pages/index/index'
        })
      },
      toCode(){
        uni.redirectTo({
          url:'/pages/login-code/login-code'
        })
      },
      toPassword(){
        uni.navigateTo({
          url:'/pages/password/password'
        })
      },
    }
  }
</script>

<style lang="scss">
  .top {
    width: 750rpx;
    height: 88rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psfiuuy9gq5ln2cg20o0mcbhjgadvp6vxj897f089bb-fcb6-4328-81f6-bacd144e6c50) 100% no-repeat;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    align-items: center;
    margin-right: 51rpx;

    .top-icon {
      margin-left: 31rpx;
      width: 20rpx;
      height: 35rpx;
      background-size: 100%;
    }

    .top-text {
      margin-left: 250rpx;
    }
  }
  //标题
  .title-box{
    margin-top: 102rpx;
    margin-left: 89rpx;
    color: #CDAD66;
    .title-text{
      font-size: 48rpx;
      .title-info{
        font-size: 28rpx;
      }
    }
  }
  //验证码登录与忘记密码
  .text-code-password{
    font-size: 24rpx;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 87rpx;
    margin-right: 90rpx;
    margin-top: 70rpx;
    .text-code{}
    .text-password{}
  }
  //账号密码
  .phone-box{
    margin: 38rpx auto 0 auto;
    width: 568rpx;
    height: 84rpx;
    border-radius: 30rpx;
    border: 1rpx #CDAD66 solid;
    display: flex;
    align-items: center;
    .phone-icon{
      width: 35rpx;
      height: 35rpx;
      background-size: 100%;
      margin-left: 42rpx;
      margin-top: 27rpx;
      margin-bottom: 24rpx;
      margin-right: 14rpx;
    }
    .phone-input{width: 415rpx;}
  }
  .password-box{
    margin: 50rpx auto;
    width: 568rpx;
    height: 84rpx;
    border-radius: 30rpx;
    border: 1rpx #CDAD66 solid;
    display: flex;
    align-items: center;
    .password-icon{
      width: 35rpx;
      height: 35rpx;
      background-size: 100%;
      margin-left: 42rpx;
      margin-top: 27rpx;
      margin-bottom: 24rpx;
      margin-right: 14rpx;
    }
    .password-input{
      width: 415rpx;
    }
    .password-is{
      width: 31rpx;
      height: 22rpx;
      background-size: 100%;
    }
  }
  //登录按钮
  .button-box{
    width: 570rpx;
    height: 86rpx;
    background-color: #CDAD66;
    border-radius: 30rpx;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 59rpx auto 39rpx auto;
  }
  // 注册提示
  .register-text{
    font-size: 24rpx;
    color: #CDAD66;
    text-align: right;
    margin-right: 91rpx;
  }
  // 协议
  .protocol-box{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 90rpx;
    .protocol-button{
      width: 14rpx;
      height: 14rpx;
      border-radius: 50%;
      border: 2rpx #999 solid;
      margin-right: 12rpx;
    }
    .protocol-button1{
      width: 18rpx;
      height: 18rpx;
      border-radius: 50%;
      background-color: #CDAD66;
      margin-right: 12rpx;
    }
    .protocol-text{
      font-size: 22rpx;
      color: #999;
    }
  }
</style>
